import React, { Component } from 'react';
import { Row, Upload, Icon, Modal } from 'antd';
// import createAPI from 'shared/utils/createAPI';

import videoIconBase64Url from '../../assets/images/stormsmart.png';

import './index.less';


class CustomUpload extends Component {

  uploadParam = {
    token: ''
  }

  constructor(props) {
    super(props);
    const { previewImage, materialType } = this.props;
    const value = props.value || '';
    let fileList = [];
    if (value) {
      fileList = [{
        uid: -1,
        // name: 'xxx.png',
        status: 'done',
        thumbUrl: materialType === '2' ? videoIconBase64Url : value,
        url: value
      }];
    }
    this.state = {
      previewImage,
      fileList,
      previewVisible: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const { materialType, value } = nextProps;
      // this.setState(value);
      if (value) {
        if (typeof value === 'string') {
          this.setState({
            fileList: [{
              uid: -1,
              // name: 'xxx.png',
              status: 'done',
              thumbUrl: materialType === '2' ? videoIconBase64Url : value,
              url: value
            }]
          });
        } else {
          this.setState({
            fileList: value
          });
        }
      }
    }
  }

  getQiNiuToken = () => createAPI.get('qiniu/token')

  handleMetrialUrlRemove = () => {
    // if (flag) {
    //   this.props.form.setFieldsValue({
    //     materialUrl: null,
    //   });
    // }
    // return flag;
    const { onRemoveMetrialUrl } = this.props;
    onRemoveMetrialUrl && onRemoveMetrialUrl();
    return true;
  }

  handleBeforeUpload = file => {
    this.uploadParam.token = '';
    return new Promise((resolve, reject) => {
      this.getQiNiuToken()
        .then(res => {
          if (res && res.code === 0) {
            this.uploadParam.token = res.body.data.upToken;
            resolve();
          }
          reject();
        })
        .catch(err => {
          reject();
          message.error(err.message);
        });
    });
  }

  handleCancel = () => {
    this.setState({
      previewVisible: false
    });
  }

  handleChange = ({ fileList }) => {
    const { onChange } = this.props;
    if (fileList && fileList.length) {
      if (fileList[0].type && fileList[0].type.indexOf('video') > -1 && fileList[0].response) {
        fileList[0].url = `http://ad.keruyun.net/${fileList[0].response.key}`;
        fileList[0].thumbUrl = videoIconBase64Url;
      }
    }
    this.setState({ fileList });
    onChange && onChange(fileList);
  }

  triggerChange = (value) => {
    const { onChange } = this.props;
    onChange && onChange();
  }

  reset = () => {
    this.setState({
      fileList: []
    });
    this.triggerChange([]);
  }

  handlePreview = file => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  getUploadBtn = () => {
    return (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
  }

  render() {
    const { previewVisible, fileList, previewImage } = this.state;
    return (
      <Row>
        <Upload
          {...this.props}
          disabled={false}
          listType="picture-card"
          action="http://up-z2.qiniu.com"
          accept="image/gif,image/jpeg,image/jpg,image/png"
          data={this.uploadParam}
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          onRemove={this.handleMetrialUrlRemove}
          beforeUpload={this.handleBeforeUpload}
        >
          {fileList.length >= 1 ? null : this.getUploadBtn()}
        </Upload>
        <Modal
          visible={previewVisible}
          footer={null}
          onCancel={this.handleCancel}
        >
          <iframe src={previewImage} frameBorder="0" width="100%" height="500px"></iframe>
{/*          <img
            alt="example"
            style={{ width: '100%' }}
            src={previewImage}
          />*/}
        </Modal>
      </Row>
    );
  }
}

export default CustomUpload;
